<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="wrap">
        <div class="wrap-top">
            <div class="wrap-nav">
                <div class="wrap-top-left">
                    <img src="../img/logo.png" alt="">  
                </div>
                <div class="wrap-top-right">
                    <p class="right-p">已有美团账号？</p>
                    <button class="loginBtn">登录</button>
                </div>
            </div>
        </div>
        <div class="wrap-end"></div>
    </div>
<center>
    <table class="biaoge">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repass"></td>
        </tr>
        <tr>
            <td>手机号：</td>
            <td><input type="text" name="tel"></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="注册">
            </td>
        </tr>
    </table>
</center>
</body>
<script>
    var btn = document.querySelector("[type='button']");
    var username = document.querySelector("[name='username']");
    var password = document.querySelector("[name='password']");
    var repass = document.querySelector("[name='repass']");
    var tel = document.querySelector("[name='tel']");
    var email = document.querySelector("[name='email']");
    btn.onclick = function(){
    var reg = /^[a-zA-Z]\w{3,9}$/; // 用户名：字母开头，字母、数字、下划线组成，4~10位组成
    if(!reg.test(username.value)){
        alert("用户名不符合规则");
        return false;
    }

    var reg = /^[a-zA-Z0-9]{6,12}$/; // 密码：数字字母下划线组成，6~12位
    if(!reg.test(password.value)){
        alert("密码不符合规则");
        return false;
    }

    if(repass.value != password.value){
        alert("两次密码输入不一致");
        return false;
    }

    var reg = /^1[3-9]\d{9}$/;
    if(!reg.test(tel.value)){
        alert("手机号不符合规则");
        return false;
    }

    var reg = /(^[a-zA-Z]\w{3,11}@(126|163)\.com$)|(^[1-9]\d{4,10}@qq\.com$)/;
    if(!reg.test(email.value)){
        alert("邮箱不符合规则");
        return false;
    }
    // 发送ajax请求，把数据给php
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function(){
        if(xhr.readyState===4){
            if(xhr.status>=200 && xhr.status<300){
                var res = xhr.responseText;
                if(res==1){
                    alert('用户名被注册了')
                }else if(res==3){
                    alert('注册失败');
                }else if(res==2){
                    alert('注册成功')
                    location.href = '../html/login.html';
                }
            }
        }
    }
    xhr.open('post','../php/register.php');
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    var data = 'name='+username.value+'&pass='+password.value+'&tel='+tel.value+'&email='+email.value
    xhr.send(data)
}
var loginBtn = document.querySelector('.loginBtn')
loginBtn.onclick=function(){
    location.href="./login.html"
}
</script>
</html>